.me {
    /*border: 1px red solid;*/
    width: 100vw;
    /*height: 100vh;*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 50px;
    position: relative;
    /*z-index: 100;*/
    .bg {
        background-image: linear-gradient(to bottom, #b6ebce, #f5f5f9);
        height: 200px;
        position: absolute;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: -1;
    }
    .banner {
        /*border: 1px red solid;*/
        margin: 60px 10px 10px 10px;
        height: 220px;
        background: url('../../assets/img/me/me-bg.png');
        background-size: 100% 220px;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        .user-info{
            display: flex;
            flex-direction: column;
            height: 140px;
            padding: 20px;
            .user-info-top{
                /*height: 160px;*/
                display: flex;
                flex-direction: row;
                .user-info-top-info{
                    flex: 1;
                    /*border: 1px red solid;*/
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    box-sizing: border-box;
                    padding: 0 10px;
                    color: white;
                }
            }
            .user-info-bottom{
                flex: 1;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                color: #95e9bb;
                text-align: center;
                margin-top: 10px;
            }
        }
        .vip{
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            .button{
                background-image: linear-gradient(to bottom, #b5eacd, #4fd28d);
                padding: 6px 8px;
                border-radius: 20px;
                font-size: 14px;
                color: white;
            }

        }

    }
    .me-order {
        border-radius: 10px;
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 10px;
        background-color: white;
        gap: 10px;
        .title{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .tabs{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .tabs-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 6px;
            }
        }
    }
    .list {
        margin: 10px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        /*padding: 10px;*/
        background-color: white;
        border-radius: 10px;
        /*gap: 10px;*/
        .item{
            margin: 10px;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
            justify-content: space-between;
            padding: 5px 10px;
            .content{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }
            .icon{
                align-self: center;
                width: 10px;
                height: 10px;
                background-color: transparent; /* 模块背景为透明 */
                border-color: #b6b6b6;
                border-style: solid;
                border-width: 1px 1px 0 0;
                transform: rotate(45deg); /*箭头方向可以自由切换角度*/
                margin-right: 10px;
            }
        }
    }
}
